<template>
  <div class="min-h-screen bg-gray-50">
    <div class="flex">
      <!-- 右侧内容区 -->
      <div class="flex-1 p-8">
         <!-- 密码修改 -->
        <div
          class="bg-white rounded-lg shadow-sm p-8"
        >
          <div class="flex gap-8">
            <div class="flex-1">
              <h2 class="text-2xl font-bold mb-6">修改密码</h2>
              <el-form :model="passwordForm" label-width="120px">
                <el-form-item label="当前密码">
                  <el-input
                    v-model="passwordForm.currentPassword"
                    type="password"
                    placeholder="请输入当前密码"
                    show-password
                  />
                </el-form-item>
                <el-form-item label="新密码">
                  <el-input
                    v-model="passwordForm.newPassword"
                    type="password"
                    placeholder="请输入新密码"
                    show-password
                  />
                </el-form-item>
                <el-form-item label="确认新密码">
                  <el-input
                    v-model="passwordForm.confirmPassword"
                    type="password"
                    placeholder="请再次输入新密码"
                    show-password
                  />
                </el-form-item>
                <el-form-item>
                  <el-button
                    type="primary"
                    class="!rounded-button whitespace-nowrap"
                    @click="changePassword"
                    >确认修改</el-button
                  >
                </el-form-item>
              </el-form>
              <div class="mt-6 p-4 bg-blue-50 rounded-lg">
                <h3 class="text-blue-600 font-medium mb-2">密码安全提示：</h3>
                <ul class="text-sm text-gray-600 space-y-2">
                  <li>&bull; 密码长度至少8位</li>
                  <li>&bull; 包含大小写字母、数字和特殊字符</li>
                  <li>&bull; 不要使用易猜测的个人信息</li>
                  <li>&bull; 建议定期更换密码</li>
                </ul>
              </div>
            </div>
            <div class="w-[400px]">
              <img
                src="https://ai-public.mastergo.com/ai/img_res/017ae77d85fb5c759c3770f799960af0.jpg"
                alt="security"
                class="w-full object-cover rounded-lg"
              />
              <div class="mt-4 text-center">
                <div class="text-lg font-medium text-blue-600">安全小卫士</div>
                <div class="text-sm text-gray-500">24小时守护您的账号安全</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import { ElMessage } from "element-plus";

const passwordForm = ref({
  currentPassword: "",
  newPassword: "",
  confirmPassword: "",
});

const changePassword = () => {
  if (passwordForm.value.newPassword !== passwordForm.value.confirmPassword) {
    ElMessage.error("两次输入的新密码不一致");
    return;
  }
  ElMessage.success("密码修改成功");
  passwordForm.value = {
    currentPassword: "",
    newPassword: "",
    confirmPassword: "",
  };
};
</script>

<style scoped>
/* 在这里添加你的CSS样式 */
</style>